<script setup>
import {onMounted, ref, shallowRef} from "vue";
import {
  Viewer,
  CameraEventType,
  KeyboardEventModifier,
  UrlTemplateImageryProvider,
  WebMapTileServiceImageryProvider,
  Cartesian3,
  Math,
  Cesium3DTileset,
  Ion,
  Cartographic,
  Matrix4,
  CesiumTerrainProvider,
  IonResource,
  SceneMode,
  createWorldTerrainAsync
} from "cesium";
import {CesiumRoaming} from "../../utils/CesiumRoaming.js";
const key = 'e836752269649b5ac032c29d9d2d86b6'
const baseMap = ref()
let roaming = null

//

const marksList = [
  {
    longitude: 109.3701277552,
    latitude: 34.2855571346,
    height: 1006.9757542554
  },
  {
    longitude: 109.3251624566,
    latitude: 34.21914571247569,
    height: 895.3237669350334
  },
  {
    longitude: 109.2268698160,
    latitude: 34.2121358516,
    height: 896.46944670699327
  },
  {
    longitude: 109.1135085006,
    latitude: 34.2611998076,
    height: 896.11392662866996
  },
  {
    longitude: 108.9817108333,
    latitude: 34.2687832395,
    height: 895.60264904012695
  },
  {
    longitude: 108.9427088548,
    latitude: 34.2709722209,
    height: 895.60264904012695
  },
  {
    longitude: 108.9420558994,
    latitude: 34.1933535171,
    height: 895.60264904012695
  }
]

const zanting = ref(true)



const handleStart = () => {
  roaming.initRoaming({
    model: 'https://sandcastle.cesium.com/SampleData/models/CesiumAir/Cesium_Air.glb',
    data: marksList,
    time: 200, // 漫游时间，例如120秒
    speed: 1, // 漫游速率
    isPathShow: true // 是否显示路径
  })
}

const stopRadm = () => {
  roaming.removeRoaming()
}

const handleZzn = () => {
  zanting.value = !zanting.value
  roaming.pauseOrContinue(zanting.value)
}

onMounted(async () => {
  Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMzkyZjQ5MC1iYmQyLTQ2NmUtYjU0OC1mN2I2N2VkNTcxMWQiLCJpZCI6MjA4MDE2LCJpYXQiOjE3MTI4MDkyODN9.9TltSULiBvTPauMMWMsbSrIas5t8_yQySg1yzyptc08'
  window.viewer = new Viewer(baseMap.value, {
    animation: false, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
    // terrainProvider: await CesiumTerrainProvider.fromIonAssetId(2275207)
    terrainProvider: await CesiumTerrainProvider.fromUrl('http://data.marsgis.cn/terrain', {
      requestVertexNormals: true,
      requestWaterMask: true,
      requestMetadata: true
    }),
    // sceneMode: SceneMode.SCENE3D
  })
  // window.viewer.terrainProvider = await createWorldTerrainAsync({
  //   requestWaterMask: true
  // })
  // const imgLayer = new UrlTemplateImageryProvider({
  //   url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
  //   minimumLevel: 3,
  //   maximumLevel: 18
  // })
  //
  const annLayers =  new UrlTemplateImageryProvider({
    url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    layer: "tdtAnnoLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible"
  })


  // const imgLayer =  new WebMapTileServiceImageryProvider({
  //   url:
  //       'http://t0.tianditu.gov.cn/cia_c/wmts?tk=' +
  //       key,
  //   layer: 'tdtAnnoLayer',
  //   style: 'default',
  //   format: 'image/jpeg',
  //   tileMatrixSetID: 'GoogleMapsCompatible',
  //   show: false
  // })
    // const annLayers =  new WebMapTileServiceImageryProvider({
    //   url:
    //       'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
    //       key,
    //   layer: 'tdtAnnoLayer',
    //   style: 'default',
    //   format: 'image/jpeg',
    //   tileMatrixSetID: 'GoogleMapsCompatible',
    //   show: false
    // })
  // window.viewer.imageryLayers.addImageryProvider(imgLayer);
  window.viewer.imageryLayers.addImageryProvider(annLayers);
  // window.viewer.imageryLayers.addImageryProvider( new IonImageryProvider({ assetId: 3 }));
  window.viewer.cesiumWidget.creditContainer.style.display = "none";
  window.viewer.scene.screenSpaceCameraController.tiltEventTypes = [
    CameraEventType.RIGHT_DRAG,
    CameraEventType.PINCH,
    {
      eventType: CameraEventType.RIGHT_DRAG,
      modifier: KeyboardEventModifier.CTRL
    },
    {
      eventType: CameraEventType.MIDDLE_DRAG,
      modifier: KeyboardEventModifier.CTRL
    }
  ];


  // 默认的Cesium会加载一个bingMap底图，这个地图网络不太好，一般要先去掉这个默认的
  // window.viewer.imageryLayers.remove(window.viewer.imageryLayers.get(0));
  //   const position = Cartesian3.fromDegrees( 108.95989733817409, 34.21855189221198, 1785) //可以根据需求选择坐标与坐标类型
  // window.viewer.camera.setView({
  //   destination: position,                  // 相机位置
  //   orientation: {
  //     heading: Math.toRadians(0), // 水平旋转  -正北方向
  //     pitch: Math.toRadians(-25), // 上下旋转  --俯视朝向
  //     roll: 0                                                 // 视口翻滚角度
  //   }
  // })

  roaming = new CesiumRoaming()
  console.log(roaming);

  // window.viewer.scene.primitives.add(
  //     await Cesium3DTileset.fromIonAssetId(2275207),
  // );

  // 加载3Dtitle
  // http://www.hlaxhk.com:8090/gisData/naicun/scene.json
  // http://www.hlaxhk.com:8090/gisData/binghu/tileset.json
  Cesium3DTileset.fromUrl('http://www.hlaxhk.com:8090/gisData/naicun/scene.json',{}).then(tileset => {
    // const heightOffset = 30;
    // const boundingSphere = tileset.boundingSphere;
    // const cartographic = Cartographic.fromCartesian(boundingSphere.center);
    // const surface = Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
    // const offset = Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, -3400);
    // const translation = Cartesian3.subtract(offset, surface, new Cartesian3());
    // tileset.modelMatrix = Matrix4.fromTranslation(translation);
    //   // 将3D Tiles加载到场景中
      window.viewer.scene.primitives.add(tileset);
      // 调整视角到3D Tiles
      window.viewer.zoomTo(tileset, {
        heading: Math.toRadians(0), // 水平旋转  -正北方向
        pitch: Math.toRadians(-90), // 上下旋转  --俯视朝向
        roll: 0
      });
  })

  // Cesium3DTileset.fromUrl(
  //     "https://data.mars3d.cn/3dtiles/max-fsdzm/tileset.json", {
  //       skipLevelOfDetail: true,
  //       baseScreenSpaceError: 1024,
  //       skipScreenSpaceErrorFactor: 16,
  //       skipLevels: 1,
  //       immediatelyLoadDesiredLevelOfDetail: false,
  //       loadSiblings: false,
  //       cullWithChildrenBounds: true
  //     }).then(tileset => {
  //   // 将3D Tiles加载到场景中
  //   window.viewer.scene.primitives.add(tileset);
  //   // 调整视角到3D Tiles
  //   window.viewer.zoomTo(tileset);
  // })
})

</script>

<template>
  <div ref="baseMap" class="baseMap" style="width: 100%; height: 100%"></div>
  <div class="button">
    <el-button type="primary" @click="handleStart">开始漫游</el-button>
    <el-button type="primary" @click="stopRadm">结束漫游</el-button>
    <el-button type="primary" @click="handleZzn">暂停漫游</el-button>
  </div>
</template>

<style scoped>
.button {
  position: absolute;
  padding: 10px 20px;
  background: #222222;
  right: 40px;
  top: 40px;
}
</style>